<template>
  <div class="secret_content">
    <Modal
      width="700"
      height="600"
      cancel-text
      v-model="modal"
      title="确认信息">
      信息提交成功！！！
    </Modal>
    <Tabs :animated="false">
      <TabPane label="个人信息">
        <Form>
          <FormItem label="商户号" prop="userNo">
            <Input disabled v-model="personInfo.userNo"></Input>
          </FormItem>
          <FormItem label="上次登录IP地址" prop="last_login_ip">
            <Input disabled v-model="personInfo.lastLoginIp"></Input>
          </FormItem>
          <FormItem label="上次登录时间" prop="last_login_time">
            <Input disabled v-model="personInfo.lastLoginTime"></Input>
          </FormItem>
        </Form>
      </TabPane>
      <TabPane label="认证信息">
        <Form ref="accountInfo" :model="accountInfo" :rules="accountInfoRuleValidate"
              :label-width="160">
          <div class="info-item" style="padding-top: 20px;">
            <div class="info-title">公司信息</div>
            <FormItem label="公司名称" prop="companyName">
              <Input :disabled="disabled" v-model="accountInfo.companyName"></Input>
            </FormItem>
            <FormItem label="营业执照" prop="businessLicence">
              <MyUploader :disabled="disabled" :imgSrc="accountInfo.businessLicence" ref="license"></MyUploader>
            </FormItem>
          </div>
          <div class="info-item">
            <div class="info-title">支付联系人信息</div>
            <FormItem label="联系人姓名" prop="contactName">
              <Input :disabled="disabled" v-model="accountInfo.contactName"></Input>
            </FormItem>
            <FormItem label="联系人手机" prop="contactTel">
              <Input :disabled="disabled" v-model="accountInfo.contactTel"></Input>
            </FormItem>
            <FormItem label="联系人邮箱" prop="contactEmail">
              <Input :disabled="disabled" v-model="accountInfo.contactEmail"></Input>
            </FormItem>
            <FormItem>
              <Button v-if="submitBtnShow" @click="handleAudit('accountInfo')">提交审核</Button>
              <Button type="primary" v-if="editBtnShow" @click="handleEdit">编辑</Button>
            </FormItem>
          </div>
        </Form>
      </TabPane>
    </Tabs>
  </div>
</template>

<script type="text/ecmascript-6">
  import storage from '@/utils/helpers/storageLite'
  import Model from '@/models/apps'
  import time from '@/utils/helpers/timeLite'
  import MyUploader from '@/components/MyUploader'

  export default{
    name: 'accountInfo',
    components: {
      'MyUploader': MyUploader
    },
    data () {
      const validateTel = (rule, value, callback) => {
        if (!(/^1[34578]\d{9}$/.test(value))) {
          callback(new Error('手机号码格式不正确'))
        } else {
          callback()
        }
      }
      return {
        submitBtnShow: false,
        editBtnShow: false,
        disabled: false,
        modal: false,
        id: '',
        status: '',
        personInfo: {
          userNo: '',
          lastLoginIp: '',
          lastLoginTime: ''
        },
        accountInfo: {
          companyName: '',
          businessLicence: '',
          contactName: '',
          contactTel: '',
          contactEmail: ''
        },
        accountInfoRuleValidate: {
          companyName: [
            {required: true, message: '公司名称不能为空！', trigger: 'blur'}
          ],
          contactName: [
            {required: true, message: '联系人姓名不能为空！', trigger: 'blur'}
          ],
          businessLicence: [
            {required: true}
          ],
          contactTel: [
            {required: true, message: '联系人手机不能为空！', trigger: 'blur'},
            {validator: validateTel, trigger: 'blur'}
          ],
          contactEmail: [
            {required: true, message: '联系人邮箱不能为空！', trigger: 'blur'},
            {type: 'email', message: '邮箱格式不正确', trigger: 'blur'}
          ]
        }
      }
    },
    created () {
      this.get()
    },
    methods: {
      get () {
        new Model('lastLoginInfo')
          .GET({
            params: {
              userNo: storage.get('userNo')
            }
          })
          .then((res) => {
            this.personInfo.userNo = storage.get('userNo')
            if (typeof res.data.data !== 'undefined') {
              this.personInfo.lastLoginIp = res.data.data.operateIp
              this.personInfo.lastLoginTime = time.getDateTime(res.data.data.operateTime)
            } else {
              this.personInfo.lastLoginIp = '无记录'
              this.personInfo.lastLoginTime = '无记录'
            }
          })
        new Model('userAuthInfo')
          .GET({
            params: {
              userNo: storage.get('userNo')
            }
          })
          .then((res) => {
            if (typeof res.data.data !== 'undefined') {
              this.accountInfo.companyName = res.data.data.companyName
              this.accountInfo.businessLicence = res.data.data.businessLicence
              this.accountInfo.contactName = res.data.data.contactName
              this.accountInfo.contactTel = res.data.data.contactTel
              this.accountInfo.contactEmail = res.data.data.contactEmail
              this.id = res.data.data.id
              this.status = res.data.data.status
              this.editBtnShow = true
              this.disabled = true
            } else {
              this.submitBtnShow = true
            }
          })
      },
      handleAudit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.postAccountInfo()
          }
        })
      },
      handleEdit () {
        this.editBtnShow = false
        this.disabled = false
        this.submitBtnShow = true
      },
      postAccountInfo () {
        this.accountInfo.businessLicence = this.$refs.license.imgSrc
        new Model('userAuthInfo')
          .POST({
            params: {
              userNo: storage.get('userNo'),
              ...this.accountInfo
            }
          })
          .then((res) => {
            if (res.data.errorCode === '200') {
              this.editBtnShow = true
              this.disabled = true
              this.submitBtnShow = false
              this.modal = true
            }
          })
      }
    }
  }
</script>

<style>
  .secret_content {
    width: 1000px;
    margin: 40px auto;
  }

  .info-item {
    padding-top: 30px;
    border-bottom: 1px solid #f2f2f2;
  }

  .info-title {
    padding-left: 18px;
    padding-bottom: 20px;
    color: #48AAFA;
  }
</style>
